<template>
  <div class="ChangeColor">
      <img v-on:click="click1()" src="../assets/red.png" alt="">
      <img v-on:click="click2()" src="../assets/blue.png" alt="">
      <img v-on:click="click3()" src="../assets/purple.png" alt="">
  </div>
</template>

<script>


import {mesh} from './threejs/index.js'
export default {
  name: "ChangeColor",
  data: function () {
    return {
    };
  },
  methods:{
      click1:function(){
          mesh.material.color.set(0xFF69B4);
      },
      click2:function(){
          mesh.material.color.set(0x4444ff);
      },
      click3:function(){
          mesh.material.color.set(0x8A2BE2);
      },
  }
};
</script>

<style scoped>
.ChangeColor{
  background-color:rgba(255,255,255,0.1);
  width:420px;
  position:absolute;
  bottom:20px;
  left:50%;
  margin-left:-210px;
  padding:10px 0px;
}
.ChangeColor img{
    margin-left:30px;
    cursor:pointer
  }
</style>
